import { Component } from 'react';
import PropTypes from 'prop-types';
import { Form, Input, Button, Radio, Select, Cascader, DatePicker, InputNumber, TreeSelect, Switch, Row, Col, Descriptions } from 'antd';

class Search extends Component<any>{

    static propTypes = {
        formItem: PropTypes.array.isRequired,
        labelCol: PropTypes.object,
        wrapperCol: PropTypes.object,
        layout:PropTypes.string.isRequired,
        initialValues: PropTypes.object,
    }

    onFinish = (values: any) => {
        this.props.onSubmit && this.props.onSubmit(values)
    }

    render() {
        const { formItem, labelCol, wrapperCol, layout, initialValues } = this.props
        return (
            <Form labelCol={labelCol} wrapperCol={wrapperCol} layout={layout} initialValues={initialValues} onFinish={this.onFinish}>
                {
                    formItem.map((item: any, index: any) => {
                        let el = null
                        switch (item.type) {
                            case 'input':
                                el = <Input placeholder={item.placeHolder} allowClear={true} />
                                break;
                            case 'radio':
                                el = <Radio.Group>
                                    {
                                        item.options.map((sub: any, subdex: any) => {
                                            return (
                                                <Radio value={sub.value} key={subdex}>{sub.title}</Radio>
                                            )
                                        })
                                    }
                                </Radio.Group>
                                break;
                            case 'datePicker':
                                el = <DatePicker format={item.format} placeholder={item.placeHolder} />
                                break;
                            case 'treeSelect':
                                el = <TreeSelect placeholder={item.placeHolder} treeData={item.options} allowClear={true} />
                                break;
                            case 'cascader':
                                el = <Cascader placeholder={item.placeHolder} options={item.options} />
                                break;
                            case 'select':
                                el = <Select placeholder={item.placeHolder} allowClear={true}>
                                    {
                                        item.options.map((sub: any, subdex: any) => {
                                            return (
                                                <Select.Option key={subdex} value={sub.value}>{sub.title}</Select.Option>
                                            )
                                        })
                                    }
                                </Select>
                                break;
                            case 'inputNumber':
                                el = <InputNumber min={item.min} max={item.max} />
                                break;
                            case 'switch':
                                el = <Switch />
                                break;
                        }

                        return (
                            <Form.Item label={item.label} name={item.name} key={index} rules={item.rules && item.rules}>
                                {
                                    el
                                }
                            </Form.Item>
                        )
                    })
                }
                <Form.Item wrapperCol={{ offset: 4, span: 16 }}>
                    <Button type="primary" htmlType="submit">Submit</Button>
                </Form.Item>
            </Form>
        )
    }
}
export default Search